<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="普通配置">
        <el-form ref="normalForm" :model="normalForm" :rules="normalFormRules" label-width="250px" class="normal-form">
          <el-form-item label="注册审核" prop="registerNeedVerify">
            <el-radio-group v-model="normalForm.registerNeedVerify">
              <el-radio :label="1">开启</el-radio>
              <el-radio :label="0">关闭
                <el-popover placement="right" title="提示" width="300" trigger="hover" content="关闭后, 用户注册将直接审核通过.">
                  <i slot="reference" class="el-icon-question" style="color: orange;" />
                </el-popover>
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="限制登录密码错误次数" prop="loginPasswordError">
            <el-input-number v-model="normalForm.loginPasswordError" :min="0" step-strictly :step="1" style="width: 20%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="登录密码输入错误次数超过此值, 会提示用户稍后再试, 0不限制.">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>

          <el-form-item label="邀请注册链接有效时间(天)" prop="inviteRegisterUrlInterval">
            <el-input-number v-model="normalForm.inviteRegisterUrlInterval" type="number" :min="0" :step="1" step-strictly style="width: 20%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="分享出去的邀请注册链接有效时间, 0不限">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>

          <el-form-item label="同一IP邀请注册间隔(秒)" prop="inviteRegisterIpInterval">
            <el-input-number v-model="normalForm.inviteRegisterIpInterval" :min="0" step-strictly :step="1" style="width: 20%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="同一个IP, 当前邀请注册与上一个注册时间间隔小于此值, 会提示用户注册过于频繁">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>

          <el-form-item label="同一IP每天可邀请注册数量" prop="inviteRegisterIpDayLimit">
            <el-input-number v-model="normalForm.inviteRegisterIpDayLimit" :min="0" :step="1" step-strictly style="width: 20%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="每天可邀请注册数量超过此值, 会提示用户注册过于频繁, 0不限">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>
          <el-form-item label="同一账号每天可邀请注册数量" prop="inviteRegisterDayLimit">
            <el-input-number v-model="normalForm.inviteRegisterDayLimit" :min="0" :step="1" step-strictly style="width: 20%;" />
            <el-popover placement="right" title="提示" width="300" trigger="hover" content="每天可邀请注册数量超过此值, 会提示用户注册过多, 0不限">
              <i slot="reference" class="el-icon-question" style="color: orange;" />
            </el-popover>
          </el-form-item>

          <el-form-item label="保持登录时长(秒)" prop="userLoginAccessTokenExpire">
            <el-input-number v-model="normalForm.userLoginAccessTokenExpire" :min="3600" :step="1" step-strictly style="width: 20%;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitConfigForm(normalForm)">保存</el-button>
          </el-form-item>
        </el-form>
        </el-form>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>

import {
  fetchGetConfig,
  fetchUpdateConfig
} from '@/api/config.js'

export default {
  name: 'UserSetting',
  components: {},
  data() {
    return {
      tableKey: 0,
      total: 0,
      listLoading: false,
      submitLoading: false, // 提交中
      showReviewer: false,
      dialogStatus: '',
      statusType: ['danger', 'success'],
      rules: {},

      normalForm: {
        registerNeedVerify: 1,
        loginPasswordError: 5,
        inviteRegisterUrlInterval: 7,
        inviteRegisterIpInterval: 61,
        inviteRegisterIpDayLimit: 3,
        inviteRegisterDayLimit: 100,
        userLoginAccessTokenExpire: 604800
      },
      normalFormRules: {}
    }
  },
  created() {
    this.getConfig()
  },
  methods: {
    async getConfig() {
      const that = this
      const loading = this.ceateLoading()
      await fetchGetConfig('user').then((res) => {
        const config = res.data
        that.setConfigValue(that.normalForm, config)
      })
      loading.close()
    },
    setConfigValue(form, config) {
      const keys = Object.keys(form)
      for (const i in keys) {
        if (typeof form[keys[i]] === 'object' && form[keys[i]] && !Array.isArray(form[keys[i]])) {
          if (config[keys[i]] !== undefined) {
            this.setConfigValue(form[keys[i]], config[keys[i]])
          }
        } else {
          form[keys[i]] = config[keys[i]] || form[keys[i]]
        }
      }
    },
    submitConfigForm(data) {
      const that = this
      const loading = this.ceateLoading()

      fetchUpdateConfig(data, 'user').then(function(res) {
        that.$message({
          message: '更新成功',
          type: 'success',
          showClose: true,
          duration: 3 * 1000
        })
        loading.close()
      }, () => {
        loading.close()
      })
    },
    ceateLoading() {
      return this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    moneyToYun(m) {
      return this.$utils.moneyToYun(m)
    },
    getImage(url) {
      return this.$utils.getImage(url)
    },
    parseTimes(time, cFormat) {
      return this.$utils.parseTime(time, cFormat)
    }
  }
}
</script>

<style scoped="scoped">
  .el-dialog {
    width: 650px;
    margin-top: 4rem !important;
  }

  .el-dialog__body {
    max-height: 500px;
    overflow-y: auto;
  }

  .el-table td {
    padding: 0;
  }

  .icon-uploader {
    border: 1px solid #eee;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    display: flex;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
  }

  .cate-icon {
    width: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
